/**
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 没个歌词对象
 * {time:'时间',words:歌词内容}
 *
 */
function parseLrc() {
  // console.log(lrc);
  var lins = lrc.split('\n')
  var result =[]
  for (var i = 0; i < lins.length; i++){
    var str =lins[i]
    var parts = str.split(']')
    var tamparts =parts[0].substring(1)
    // console.log(tamparts);
    var obj = {
      time: parseTimer(tamparts),
      words:parts[1]
    }
    result.push(obj)
  }
  return result
}



/**
 * 将一个时间字符串解析为数字(秒)
 * @param {string} tamparts 时间字符串
 * @returns
 */
function parseTimer(tamparts) {
  var parts = tamparts.split(':')
  return +parts[0] * 60 + +parts[1]
}

var lrcData = parseLrc()

//获取需要的dom
var doms = {
  audio: document.querySelector('audio'),
  ul: document.querySelector('.container ul'),
  container: document.querySelector('.container'),
};

/**
 *计算出，在当前播放器播放到第几秒的情况下
 *lrcData数组中，应该高亮显示的歌词下标
 *如果没有任何一句歌词显示，则得到-1
 */
function findIndex() {
  // 播放器当前时间
  // console.log(lrcData);
  var curTime = doms.audio.currentTime;
  for (var i = 0; i < lrcData.length; i++) {
    if (curTime < lrcData[i].time) {
      return i - 1;
    }
  }
  // 找遍了都没找到（说明播放到最后一句）
  return lrcData.length - 1;
}

//界面

/**
 * 创建歌词元素li
 */

function createLrcElements() {
  var frag = document.createDocumentFragment()
  for (var i = 0; i < lrcData.length; i++){
    var li =document.createElement('li')
    li.textContent = lrcData[i].words
    frag.appendChild(li)
  }
  doms.ul.appendChild(frag)
}

createLrcElements();

//容器高度
var containerHeight = doms.container.clientHeight
//每个li的高度
var liHeight =doms.ul.children[0].clientHeight
//最大偏移量
var maxOffset = doms.ul.clientHeight - containerHeight

/**
 * 设置ul元素的偏移量
 */
function setOffset() {
  var index = findIndex()
  var offset = liHeight * index + liHeight / 2 - containerHeight / 2
  if (offset < 0) {
    offset=0
  }
  if (offset > maxOffset) {
    offset=maxOffset
  }
  doms.ul.style.transform = `translateY(-${offset}px)`;
  //去掉之前的 active样式
  var li =doms.ul.querySelector('.active')
  if (li) {
    li.classList.remove('active')
  }
  li = doms.ul.children[index];
  if (li) {
    li.classList.add('active')
  }
}

doms.audio.addEventListener('timeupdate',setOffset)